<template>
  <div class="problem flex">
    <div class="problem_l">
      <div class="menu">
        <div class="menu_title">
          <span>问题反馈</span>
        </div>
        <ul>
          <li :class="{ 'active': problemState.current === 1 }" @click="handerClick(1)">· &nbsp;&nbsp;问题列表</li>
          <li :class="{ 'active': problemState.current === 2 }" @click="handerClick(2)">· &nbsp;&nbsp;热点问题</li>
        </ul>
      </div>
    </div>
    <div class="problem_r flex_1">
      <BreadCrumbs></BreadCrumbs>
      <router-view></router-view>
    </div>
  </div>

</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// BreadCrumbs
const router = useRouter()
const problemState = reactive({
  current: 1
})
const handerClick = (num) => {
  problemState.current = num
  if (num === 1) {
    router.push({
      path: '/print/problem/list'
    })
  } else {
    router.push({
      path: '/print/problem/hotspot'
    })
  }
}
</script>
<style lang="scss" scope>
@use './css/index.scss' as vars;
</style>
